import React, { useEffect } from "react";
import { Description } from "@ct0/ui";
import { Eye } from "@ct0/icons";

export default DescriptionPanel;

Description.extend("custom1", ({ value }) => {
  return <div>{String(value)}</div>;
});
Description.extend("custom2", () => <div>custom2</div>);

Description.extend("with length", ({ value }) => {
  return (
    <div>
      {value} {String(value).length}
    </div>
  );
});

function DescriptionPanel() {
  return (
    <div>
      <h2>Description 描述</h2>
      <ul>
        <li>用来描述一组数据，包含两个部分</li>
        <li>基础展示能力，</li>
        <li>允许自定义扩展展示能力</li>
      </ul>
      <div>
        <h2>使用方法</h2>
        <div>
          在项目中新建文件 Description.tsx 然后进行组件扩展
          <pre>
            <code className="language-jsx">
              {`
import { Description } from '@ct0/ui'

Description.extend("new type A", function(){ return <div></div> })
Description.extend("new type B", function(){ return <div></div> })
Description.extend("new type C", function(){ return <div></div> })

export default Description
              `}
            </code>
          </pre>
        </div>
      </div>
      <h2>代码演示</h2>
      <div>
        <div>
          <Description
            bordered
            title={
              <span>
                基础调用
                <Eye />
              </span>
            }
            columns={2}
            items={[
              { label: "不填类型", value: "默认值" },
              { label: "数字", value: 123.456 },
              { label: "布尔", value: true },
              { label: "时间", value: new Date() },
              { label: "null", value: null },
              { label: "undefined", value: undefined },
              { type: "with length", label: "b", value: 12 },
              { type: "not exist", label: "某错误类型", value: 1 },
            ]}
          />{" "}
        </div>{" "}
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { Description } from '@ct0/ui'`}
              {"\n"}
              ReactDOM.render(
              {`
<Description
  bordered
  title="基础调用"
  columns={2}
  items={[
    { label: "label1", value: "value1" },
    { label: "label2", value: 2 },
    { label: "label3", value: undefined },
  ]}
/>`}
              , mountNode );
            </code>
          </pre>
        </div>
      </div>

      <div>
        <div>
          <Description
            title="自定义扩展"
            columns={2}
            columnGap={50}
            items={[
              {
                label: "label1",
                labelTips: "help",
                value:
                  "value1value1value1value1value1value1value1value1value1value1value1value1value1value1value1value1value1value1",
              },
              { type: "custom1", label: "custom1", value: "v1" },
              { type: "custom2", label: "custom2", value: "v2" },
            ]}
          />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { Description } from '@ct0/ui'`}
              {"\n"}
              {`
//在typescript中使用时需要定义具体的类型
declare module "@ct0/ui" {
  interface DescriptionInjectComponents {
    custom1: typeof Componemt1;
    custom2: typeof Componemt2;
  }
}
              `}
              {`
Description.extend("custom1", Componemt1);
Description.extend("custom2", Componemt2);
              `}
              {"\n"}
              ReactDOM.render(
              {`
<Description
  title="自定义扩展"
  items={[
    { label: "label1", value: "value1" },
    { type: "custom1", label: "custom1", meta: { text: "custom1" } },
    { type: "custom2", label: "custom2" },
  ]}
/>`}
              , mountNode );
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <ul>
        <li>Description.extend(type, component)</li>
        <li>使用extend进行自定义扩展功能</li>
      </ul>
      <table border="1" width="60%">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>items</td>
            <td>*</td>
            <td>配置项</td>
            <td>DescriptionOption[]</td>
            <td>-</td>
          </tr>
          <tr>
            <td>title</td>
            <td>-</td>
            <td>标题</td>
            <td>React.ReactNode</td>
            <td>-</td>
          </tr>
          <tr>
            <td>bordered</td>
            <td>-</td>
            <td>是否增加边框</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>columns</td>
            <td>-</td>
            <td>展示列数</td>
            <td>1 | 2 | 3</td>
            <td>1</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
